;(function () {
	let list = {
		template: `<div class="clearfix relative global_table border-l border-r border-t border-b br-4 mb-10" ref="vs" style="position:relative">
			<div class="hl-custom-tabl-dialog" v-if="loadingflag"><img src="assets/images/loading.gif" alt=""><div>加载中...</div></div>
			<div class="relative hl-scroll-container" :style="{marginRight: selectCheck ? '0' : '123px'}">

				<div @click="leftButton" class="absolute hide text-center hl-scroll-button z-50 cursor" v-if="scrollButton" style="left:0;"><span class="icon-Gm-previous"></span></div>
				<div @click="rightButton" class="absolute hide text-center hl-scroll-button z-50 cursor" v-if="scrollButton" style="right:0;"><span class="icon-Gm-next"></span></div>
				<vue-scroll :ops="ops" ref="scrollWrap" @handle-scroll="handleComplete">
					<div :style="{width: selectCheck ? totalWidth : totalWidth}">
						<div class="config-table-title-wrap dy-flex">
							<div class="config-table-title-item global_table_title" style="width: 80px;" v-if="selectCheck">
								<span class="hl-checkbox" @click="checkAllButton" :class="{active: checkFlag}"><span class="ml-10">全选</span></span>
							</div>
							<div v-if="tableSelectionCode == 'JD' && item.baseFlag == 'Y'" class="config-table-title-item global_table_title" @click="sortBySTTime(item)" :style="{'flex': item.flex}" style="padding: 0px;" v-for="(item, index) in menuList">
								<span>{{ item.name }}</span>
								<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1"
								  v-for="(time,indexTime) in dateTimeUpdate"
								  :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == orderList[0], 'icon-Gm-sort-descending': isActiveCode == item.value && orders == orderList[1]}">
								  <span class="path1"></span><i class="path2"></i>
								</span>
							</div>
							<div v-if="tableSelectionCode == 'WZ'" class="config-table-title-item global_table_title" @click="sortBySTTime(item)" :style="{'flex': item.flex}" style="padding: 0px;" v-for="(item, index) in menuList">
								<span>{{ item.name }}</span>
								<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1"
								  v-for="(time,indexTime) in dateTimeUpdate"
								  :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == orderList[0], 'icon-Gm-sort-descending': isActiveCode == item.value && orders == orderList[1]}">
								  <span class="path1"></span><i class="path2"></i>
								</span>
							</div>
							<div v-if="tableSelectionCode == 'PZ' && item.customShowFlag == 'Y'" class="config-table-title-item global_table_title" @click="sortBySTTime(item)" :style="{'flex': item.flex}" style="padding: 0px;" v-for="(item, index) in menuList">
								<span>{{ item.customDisplayName ? item.customDisplayName : item.name }}</span>
								<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1"
								  v-for="(time,indexTime) in dateTimeUpdate"
								  :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == orderList[0], 'icon-Gm-sort-descending': isActiveCode == item.value && orders == orderList[1]}">
								  <span class="path1"></span><i class="path2"></i>
								</span>
							</div>
						</div>
						<div class="config-table-content-wrap">
							<ul class="dy-flex global_table_item" v-for="(item, index) in listData">
								<li class="text-center line-height-40" style="width: 80px;" v-if="selectCheck">
									<span class="hl-checkbox" :class="{active: item.selectflag}" @click="oneSelect(index)"></span>
								</li>
								<li :title="!title ? null : item[item0.value] | formatUndefinedTitle" v-if="tableSelectionCode == 'JD' && item0.baseFlag == 'Y'" class="text-center line-height-40" :style="{'flex': item0.flex}" style="padding: 0px;" v-for="(item0, index0) in menuList" @mouseenter="mouseEnter($event, item, item0)" @mouseleave="mouseleaveOut">
									{{item[item0.value] | formatUndefined}}
								</li>
								<li :title="!title ? null : item[item0.value] | formatUndefinedTitle" v-if="tableSelectionCode == 'WZ'" class="text-center line-height-40" :style="{'flex': item0.flex}" style="padding: 0px;" v-for="(item0, index0) in menuList" @mouseenter="mouseEnter($event, item, item0)" @mouseleave="mouseleaveOut">
									{{item[item0.value] | formatUndefined}}
								</li>
								<li :title="!title ? null : item[item0.value] | formatUndefinedTitle" v-if="tableSelectionCode == 'PZ' && item0.customShowFlag == 'Y'" class="text-center line-height-40" :style="{'flex': item0.flex}" style="padding: 0px;" v-for="(item0, index0) in menuList" @mouseenter="mouseEnter($event, item, item0)" @mouseleave="mouseleaveOut">
									{{item[item0.value] | formatUndefined}}
								</li>
							</ul>
						</div>
					</div>
				</vue-scroll>
			</div>
			<div class="config-table-operate-wrap" v-if="!selectCheck">
				<div class="title" style="background-color: rgb(240, 242, 255); height: 40px;">
					<div class="name">操作</div>
					<div class="extension-wrap"><i class="icon-predict-more extension-icon"></i></div>
					<ul class="table-type-wrap z-999">
						<li v-for="(code, coIndex) in tableSelectionList" :class="{active: code.code == tableSelectionCode}" @click="selectTableType(code)">
							{{ code.name }}
							<span class="icon-Gm-edit" v-if="code.code == 'PZ'" @click.stop.prevent="selectTableTypePZ(code)"></span>
						</li>
					</ul>
				</div>
				<ul class="button-group">
					<li class="global_table_item relative" v-for="(operate, index) in listData">
						<slot v-bind:opData="operate" v-bind:opIndex="operate"></slot>
					</li>
				</ul>
			</div>
			<div class="pop box-o-shadow config-table-layer" v-if="isShowTableLayer">
			  <div class="head-pop font-16"><span>自定义列</span>
			    <button class="fw-close absolute close" type="button" @click="closeTableLayer">×</button>
			  </div>
			  <div class="content-pop">
			    <div class="content text-center">
			      <ul class="title-wrap">
			        <li class="dy-fx-1 text-left">名称</li>
			        <li class="dy-fx-2">自定义名称</li>
			        <li class="dy-fx-1">状态</li>
			      </ul>
			      <div class="ctx-wrap" id="sortableTable">
			        <ul  :class="{ 'active': item.isActive == 'Y' }"  v-for="(item,index) in sortTableTitle" @mouseenter="showhighLightTitleItem(item,index)" @mouseleave="removehighLightTitleItem(item,index)">
			          <li class="sort-sign" :class="{ 'active':item.isActive == 'Y' }">排序</li>
			          <li class="dy-fx-1 name">{{item.name}}</li>
			          <li class="dy-fx-2">
			            <input type="text" class="form-control" v-model="item.customDisplayName">
			          </li>
			          <li class="dy-fx-1 ">
			            <span class="show-icon " :class="{'icon-Nav-contract-choice':item.customShowFlag == 'Y' , 'icon-uncheck':item.customShowFlag == 'N' }" @click="selectedTitleItem(index)">显示</span>
			            <span class="hide-icon " :class="{'icon-Nav-contract-choice':item.customShowFlag == 'N' , 'icon-uncheck':item.customShowFlag == 'Y' }" @click="cancelSelectedTitleItem(index)">隐藏</span>
			          </li>
			        </ul>

			      </div>
			    </div>
			  </div>
			  <div class="fw-button">
			    <button type="button" class="fw-submit yes" @click="confirmSubmitTable">确定</button>
			    <button type="button" class="fw-submit no" @click="closeTableLayer">取消</button>
			  </div>
			</div>
			<div class="backdrop" v-if="isShowTableLayer"></div>
		</div>`,
		props: {
			menuData: {
				default: () => {return []},
				type: Array
			},
			orderList: {
				default: () => {return ['ASC', 'DESC']},
				type: Array
			},
			data: {
				default: () => {return []},
				type: Array
			},
			configType: {
				default: 'JD',
				type: String
			},
			scrollButton: {
				default: false,
				type: Boolean
			},
			selectCheck: {
				default: false,
				type: Boolean
			},
			isOperate: {
				default: false,
				type: Boolean
			},
			title: {
				default: false,
				type: Boolean
			},
			loadingflag:{
				default: false,
				type: Boolean
			}
		},
		filters: {
			formatUndefined: function(item) {
			  if (!item) return '--';
				if (typeof item == 'number') {
					if (!isNaN(item) && item.toString().length == 13) {
						return hlDateUtil.formatUTCDate(item, 'yyyy-MM-dd HH:mm')
					};
				}
			  return item
			},
			formatUndefinedTitle: function(item) {
			  if (!item) return null;
				if (typeof item == 'number') {
					if (!isNaN(item) && item.toString().length == 13) {
						return hlDateUtil.formatUTCDate(item, 'yyyy-MM-dd HH:mm')
					};
				}
			  return item
			},
		},
		watch: {
			menuData (val) {
				val.map(item => {
					if (!item.styleWidth && item.name != '序') {
						item.styleWidth = 120;
					}
					if (!item.styleWidth && item.name == '序') {
						item.styleWidth = 40
					}
					if (item.orderFlag == 'Y') {
						this.dateTimeUpdate.push(item.value)
					}
					item.seq = Number(item.seq)
					item.customSeq = Number(item.customSeq)
				})
				let res = 0;
				val.map(item => {
					if (this.tableSelectionCode == 'JD' && item.baseFlag == 'Y') {
						res += Number(item.styleWidth)
					}
					if (this.tableSelectionCode == 'WZ') {
						res += Number(item.styleWidth)
					}
					if (this.tableSelectionCode == 'PZ' && item.customShowFlag == 'Y') {
						res += Number(item.styleWidth)
					}
				})
				val.map(item => {
					item.isActive = 'N'
					item.flex = item.styleWidth/res*100
				})
				let menuArr = JSON.parse(JSON.stringify(val));
				if (this.tableSelectionCode == 'JD' || this.tableSelectionCode == 'WZ') {
					menuArr = menuArr.sort(hlArrayUtil.compareAsc('seq'))
				}
				if (this.tableSelectionCode == 'PZ') {
					menuArr = menuArr.sort(hlArrayUtil.compareAsc('customSeq'))
				}
				this.menuList = menuArr;
			},
			data (val) {
				val.map(item => {
					item.selectflag = false;
				})
				this.selectData.map(item => {
					item.selectflag = false;
				})
				setTimeout(() => {
					let count = 0;
					for (let i = 0; i < val.length; i++) {
						for (let j = 0; j < this.selectData.length; j++) {
							if (JSON.stringify(val[i]) == JSON.stringify(this.selectData[j])) {
								val[i]['selectflag'] = true
								count++
							}
						}
					}
					this.listData = val;
					if (count == 10) {
						this.checkFlag = true
					} else {
						this.checkFlag = false
					}
				}, 10)
			},
			configType (val) {
				this.tableSelectionCode = val
			}
		},
		computed: {
			totalWidth () {
				let res = 0;
				this.menuList.map(item => {
					if (this.tableSelectionCode == 'JD' && item.baseFlag == 'Y') {
						res += Number(item.styleWidth)
					}
					if (this.tableSelectionCode == 'WZ') {
						res += Number(item.styleWidth)
					}
					if (this.tableSelectionCode == 'PZ' && item.customShowFlag == 'Y') {
						res += Number(item.styleWidth)
					}
				})
				res = res < 960 ? '100%' : res + (this.selectCheck ? 120 : 0) + 'px'
				return res
			},
			moreDisplay () {
				let res = 0;
				this.operateList.map(item => {
					if (!item.permissions) {
						res++
					}
					if (item.permissions) {
						if (this.permissions.indexOf(item.permissions) > -1) {
							res++
						}
					}
				})
				return res
			}
		},
		data () {
			return {
				tableSelectionList: [
					{name: '简单表格', code: 'JD'},
					{name: '完整表格', code: 'WZ'},
					{name: '自定义表格', code: 'PZ'}
				],
				menuList: [],
				dateTimeUpdate: [],
				isActiveCode: '#',
				tableSelectionCode: 'JD',
				orders: '#',
				permissions: JSON.parse(window.localStorage.getItem('permissions')),
				listData: [],
				checkFlag: false,
				selectData: [],
				sortTableTitle: [],
				isShowTableLayer: false,
				selectData: [],
				//滚动条配置
				scrollDisx: 0,
				ops: {
				  bar: {
				    background: '#000',
						onlyShowBarOnScroll: false,
						keepShow: false,
						hoverStyle: false,
						size: '10px',
						opacity: 0.3
				  },
					scrollPanel: {
						scrollingX: true,
						scrollingY: false
					}
				}
			}
		},
		methods: {
			handleComplete(vertical, horizontal) {
					this.scrollDisx = horizontal.process*100
			},
			//选择简单完整配置
			selectTableType(item) {
				this.tableSelectionCode = item.code;
			  this.$emit('on-click-type', item)
			},
			//显示自定义配置
			selectTableTypePZ (item) {
				this.isShowTableLayer = true;
				this.sortTableTitle = JSON.parse(JSON.stringify(this.menuList))
				setTimeout(() => {
					this.initSortable()
				}, 30)
			},
			//排序
			sortBySTTime (item) {
			  if(this.dateTimeUpdate.indexOf(item.value) == -1) return
			  this.isActiveCode = item.value;
			  this.orders = this.orders == this.orderList[0] ? this.orderList[1] : this.orderList[0];

			  this.$emit('on-click-sort', {columns: item.orderName, orders: this.orders, value: item.value})
			},
			//向左
			leftButton () {
				this.$refs['scrollWrap'].scrollTo(
					{
						x: 0
					},
					150
				);
			},
			//向右
			rightButton () {
				this.$refs['scrollWrap'].scrollTo(
					{
						x: '100%'
					},
					150
				);
			},
			//全选
			checkAllButton () {
				this.checkFlag = !this.checkFlag;
				let data = [];
				if (this.checkFlag) {
					this.listData.map(item => {
						item.selectflag = true
					})
					this.selectData.map(item => {
						item.selectflag = true
					})
					if (!this.selectData.length) {
						this.selectData = JSON.parse(JSON.stringify(this.listData))
					}
					if (this.selectData.length) {
						for (let i = 0; i < this.listData.length; i++) {
							let flag = true;
							for (let j = 0; j < this.selectData.length; j++) {
								if (JSON.stringify(this.listData[i]) == JSON.stringify(this.selectData[j])) {
									flag = false
								}
							}
							if (flag) {
								this.selectData.push(this.listData[i])
							}
						}
					}
				}

				if (!this.checkFlag) {
					this.selectData.map(item => {
						item.selectflag = false
					})
					this.listData.map(item => {
						item.selectflag = false
					})

					for (let i = 0; i < this.listData.length; i++) {
						for (let j = 0; j < this.selectData.length; j++) {
							if (JSON.stringify(this.listData[i]) == JSON.stringify(this.selectData[j])) {
								this.selectData.splice(j, 1)
								j--
							}
						}
					}

				}

				this.$emit('on-click-select', this.selectData)
			},
			//单选
			oneSelect (i) {
				this.listData[i].selectflag = !this.listData[i].selectflag
				this.$forceUpdate();

				if (this.selectData.length) {
					if (this.listData[i].selectflag) {
						this.selectData.map(item => {
							item.selectflag = JSON.parse(JSON.stringify(this.listData[i].selectflag))
						})
					}
					let flag = true;
					for (let j = 0; j < this.selectData.length; j++) {
						if (JSON.stringify(this.listData[i]) == JSON.stringify(this.selectData[j])) {
							this.selectData.splice(j, 1)
							flag = false
						}
					}
					if (flag) {
						this.selectData.push(this.listData[i])
					}
				}

				if (!this.selectData.length) {
					if (this.listData[i].selectflag) {
						this.selectData.push(this.listData[i])
					}
				}

				this.$emit('on-click-select', this.selectData)
			},
			//操作按钮
			operateButton (item0, item) {
				let name = null;
				if (!item0.key) {name = item0.name }
				if (item0.key && !item0.compare) {name = item[item0.key] ? item0.newName : item0.name }
				if (item0.key && item0.compare) {name = item[item0.key] == item0.compare ? item0.newName : item0.name }

				this.$emit('on-click-operate', {name: name, data: item})
			},
			//鼠标移动到某个列的值
			mouseEnter(e, item, item0) {
				this.$emit('on-mouseenter', {
					width: e.srcElement.offsetWidth,
					left: e.srcElement.offsetLeft,
					top: e.srcElement.parentNode.offsetTop + 40,
					data: item,
					value: item0.value,
					name: item0.name
				})
			},
			//鼠标离开到某个列的值
			mouseleaveOut() {
			  this.$emit('on-mouseleave')
			},
			//关闭自定义表头弹窗
			closeTableLayer() {
			  this.isShowTableLayer = false;
			},
			//显示某个自定义标题
			selectedTitleItem(i) {
			  this.sortTableTitle[i].customShowFlag = 'Y'
			},
			//关闭某个自定义标题
			cancelSelectedTitleItem(i) {
			  this.sortTableTitle[i].customShowFlag = 'N'
			},
			showhighLightTitleItem(el, i) {
				this.sortTableTitle[i].isActive = 'Y'
			},
			removehighLightTitleItem(el, i) {
				this.sortTableTitle[i].isActive = 'N'
			},
			// 确定提交自定义表格
			confirmSubmitTable() {
				let data = JSON.parse(JSON.stringify(this.sortTableTitle))
				data.map((item, index) => {
					item.newIndex = index
				})

				this.$emit('on-click-custom', data)
				this.closeTableLayer()
			},
			// 初始化拖动排序
			initSortable() {
			  const self = this;
			  const el = document.getElementById('sortableTable');
			  Sortable.create(el, {
			    draggable: 'ul',
			    onEnd(evt) {
			      const beginIndex = evt.oldIndex;
			      const endIndex = evt.newIndex;
			      const newArr = JSON.parse(JSON.stringify(self.sortTableTitle));
			      newArr.splice(endIndex, 0, newArr.splice(beginIndex, 1)[0])
			      self.sortTableTitle = [];
			      self.$nextTick(() => {
			        self.sortTableTitle = newArr
			      })
			    }
			  })
			},
			//滚动初始化
			rollInit () {
				const self = this;
				let disx = 0;
				function scrollFunc (e, ref){
					e=e||window.event;
					if (e&&e.preventDefault){
						if (e.deltaY > 0) {
							disx += 10
						}
						if (e.deltaY < 0) {
							disx -= 10
						}
						if (disx > 100) {disx=100}
						if (disx < 0) {disx = 0}
						self.$refs[ref].scrollTo(
							{
								x: disx + '%'
							},
							10
						);
						e.preventDefault();
						e.stopPropagation();
					}else{
					 e.returnvalue=false;
					 return false;
					}
				}

				document.querySelector('.hl-scroll-container').onmouseenter = function () {
					disx = self.scrollDisx;
					scrollLeft('.hl-scroll-container', 'scrollWrap')
				}

				document.querySelector('.hl-scroll-container').onmouseleave = function () {
					document.querySelector('.hl-scroll-container').onmousewheel = null;
				};

				function scrollLeft (className, ref) {
					function addEventListFn(e) {scrollFunc(e, ref)}
					document.querySelector(className).onmousewheel = addEventListFn
				}
			}
		},
		mounted () {
			let style = document.createElement('style')
			style.innerHTML = `
				.__vuescroll .__panel{overflow:hidden !important}
				.hl-scroll-button {background: rgba(0,0,0,.3);width:45px;height:45px;line-height:45px;top:50%;transform: translate(0, -50%);color:#fff;}
				.hl-scroll-container:hover .hl-scroll-button{display: block}
				.list-more {left: -104px;top: 50%;transform: translate(0, -50%);background: #fff;width: 100px;line-height: 30px;z-index: 9;filter: drop-shadow(0px 0px 5px rgba(172,172,172,0.5)); display: none;}
				.list-more:before {content: '';position: absolute;right: -16px;top: 50%;transform: translate(0, -50%);width: 0;height: 0;border-width: 8px;border-style: solid;border-color: transparent transparent transparent #fff;}
				.list-more a {display: block;border-bottom: 1px solid #ddd;}
				.list-more a:last-child {border: 0;}
				.list-more-hover:hover .list-more {display: block; }
			`
			this.$refs.vs.appendChild(style)
			this.tableSelectionCode = this.configType;
			this.rollInit()
		}
	}

	Vue.component('hl-list', list)

} ())
